<template>
  <div class="app-container home">
    <div>
      <el-descriptions title="用户数据统计（近半年注册用户）">
      </el-descriptions>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content ep-bg-purple"/>
          <div class="sum-one">
            <div class="sum-two">
              <span>20岁以下</span>
              <span style="font-weight: bold;font-size: 24px">{{sumInfo.ersNumber}}人</span>
            </div>
            <div>
              <el-icon color="#0d84ff" size="55">
                <Histogram/>
              </el-icon>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple"/>
          <div class="sum-one">
            <div class="sum-two">
              <span>20-30岁</span>
              <span style="font-weight: bold;font-size: 24px">{{sumInfo.sansNumber}}人</span>
            </div>
            <div>
              <el-icon color="#FF6A0DFF" size="55">
                <Histogram/>
              </el-icon>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple"/>
          <div class="sum-one">
            <div class="sum-two">
              <span>30-40岁</span>
              <span style="font-weight: bold;font-size: 24px">0人</span>
            </div>
            <div>
              <el-icon color="#ff074a" size="55">
                <Histogram/>
              </el-icon>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple"/>
          <div class="sum-one">
            <div class="sum-two">
              <span>40-50岁</span>
              <span style="font-weight: bold;font-size: 24px">{{sumInfo.sisNumber}}人</span>
            </div>
            <div>
              <el-icon color="#EF0CDDFF" size="55">
                <Histogram/>
              </el-icon>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple"/>
          <div class="sum-one">
            <div class="sum-two">
              <span>50岁以上</span>
              <span style="font-weight: bold;font-size: 24px">{{sumInfo.wusNumber}}人</span>
            </div>
            <div>
              <el-icon color="#D7A306FF" size="55">
                <Histogram/>
              </el-icon>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple"/>
          <div class="sum-one">
            <div class="sum-two">
              <span>未维护</span>
              <span style="font-weight: bold;font-size: 24px">{{sumInfo.noNumber}}人</span>
            </div>
            <div>
              <el-icon color="#B0AFAFFF" size="55">
                <Histogram/>
              </el-icon>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="14">
          <div class="sum-three">
            <el-descriptions title="审核约局">
            </el-descriptions>
            <div style="display: flex;flex-direction: row;justify-content: space-around">
              <el-card style="width:100%;">
                <el-table :data="SkYueJuList" style="width: 100%;overflow-y: auto;height: 180px">
                  <el-table-column label="开始时间" width="120" show-overflow-tooltip>
                    <template #default="scope">{{ scope.row.startTime }}</template>
                  </el-table-column>
                  <el-table-column property="endTime" label="结束时间" width="120" show-overflow-tooltip/>
                  <el-table-column
                    property="title"
                    label="标题"
                    width="240"
                    show-overflow-tooltip
                  />
                  <el-table-column property="content" label="内容" show-overflow-tooltip/>
                </el-table>
              </el-card>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="sum-three">
            <el-descriptions title="男女比例（近半年注册用户）">
            </el-descriptions>
            <div style="display: flex">
              <div id="echartsDom" ref="echartsDom" style="width: 260px;height: 260px"></div>
              <div style="display: flex;flex-direction: column;margin-left: 10px;height: 220px;justify-content: center">
                <div style="display: flex;margin-bottom: 20px">
                  <span style="width: 80px">男：</span>
                  <div style="width: 300px">
                    <el-progress :percentage="sexInfo.nanSexBiLi" stroke-width="10"/>
                  </div>
                </div>
                <div style="display: flex;margin-bottom: 20px">
                  <span style="width: 80px">女：</span>
                  <div style="width: 300px">
                    <el-progress :percentage="sexInfo.nvSexBiLi" color="#FC6767FF" stroke-width="10"/>
                  </div>
                </div>
                <div style="display: flex;">
                  <span style="width: 80px"> 未维护：</span>
                  <div style="width: 300px">
                    <el-progress :percentage="sexInfo.noSexBiLi" color="#BBBBBBFF" stroke-width="10"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div style="margin-top: 20px;background-color: #ffffff;height: 300px;border-radius: 6px;padding: 20px">
            <el-descriptions title="近半年达人订单比例（达人性别）">
            </el-descriptions>
            <div id="zhuzhuangtu" ref="echartsDom" style="width: 100%;height: 260px"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="margin-top: 20px;background-color: #ffffff;height: 300px;border-radius: 6px;padding: 20px">
            <el-descriptions title="近半年达人订单比例（下单人性别）">
            </el-descriptions>
            <div id="zhuzhuangtu2" ref="echartsDom" style="width: 100%;height: 260px"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider/>
  </div>
</template>

<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import {getSkAppUser, getSum} from "@/api/app/SkAppUser";
import {getShList} from "@/api/app/SkYueJu";
import {getUserSexSumList,getDaRenSexSumList} from "@/api/app/SkYueDanOrder";
import {SkYueJuVO} from "@/api/app/SkYueJu/types";
const SkYueJuList = ref<SkYueJuVO[]>([]);
const goTarget = (url: string) => {
  window.open(url, '__blank');
};
const tableData: User[] = [
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South Frankfield, Illinois',
  },
  {
    date: '2016-05-02',
    name: 'Brandon Deckert',
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
]

const sumInfo = ref({
  allNumber: 0,
  ersNumber: 0,
  nanSexNumber: 0,
  noNumber: 0,
  noSexNumber: 0,
  nvSexNumber: 0,
  sansNumber: 0,
  sisNumber: 0,
  wusNumber: 0,
})
const sexInfo = ref({
  nanSexBiLi:0,
  nvSexBiLi:0,
  noSexBiLi:0
})

const yuaning = async () => {
  console.log(sexInfo.value,"11111111111111111111")
  var chartDom = document.getElementById('echartsDom');
  var myChart = echarts.init(chartDom);
  var option;
  option = {

    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          {value: sumInfo.value.nanSexNumber, name: '男'},
          {value: sumInfo.value.nvSexNumber, name: '女'},
          {value: sumInfo.value.noSexNumber, name: '未维护'}
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}

const zhuzhuangtu = async () => {
  const res = await getDaRenSexSumList();
  console.log(res)
  var chartDom = document.getElementById('zhuzhuangtu');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '近半年达人订单比例（达人性别）',
      subtext: 'Fake Data',
      show: false
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['男', '女']
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: res.data.Xzhou
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '男',
        type: 'bar',
        data: res.data.drNan,
        markPoint: {
          data: [
            {type: 'max', name: 'Max'},
            {type: 'min', name: 'Min'}
          ]
        },
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      },
      {
        name: '女',
        type: 'bar',
        data: res.data.drNv,
        markPoint: {
          data: [
            {name: 'Max', value: 182.2, xAxis: 7, yAxis: 183},
            {name: 'Min', value: 2.3, xAxis: 11, yAxis: 3}
          ]
        },
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

const zhuzhuangtu2 = async () => {
  const res = await getUserSexSumList();
  var chartDom = document.getElementById('zhuzhuangtu2');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '近半年达人订单比例（达人性别）',
      subtext: 'Fake Data',
      show: false
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['男', '女', '未维护']
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: res.data.Xzhou
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '男',
        type: 'bar',
        data: res.data.drNan,
        markPoint: {
          data: [
            {type: 'max', name: 'Max'},
            {type: 'min', name: 'Min'}
          ]
        },
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      },
      {
        name: '女',
        type: 'bar',
        data: res.data.drNv,
        markPoint: {
          data: [
            {name: 'Max', value: 182.2, xAxis: 7, yAxis: 183},
            {name: 'Min', value: 2.3, xAxis: 11, yAxis: 3}
          ]
        },
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      },
      {
        name: '未维护',
        type: 'bar',
        data: res.data.drNo,
        markPoint: {
          data: [
            {name: 'Max', value: 182.2, xAxis: 7, yAxis: 183},
            {name: 'Min', value: 2.3, xAxis: 11, yAxis: 3}
          ]
        },
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      }
    ]
  };

  option && myChart.setOption(option);
}
//查询统计信息
const funGetSum = async () => {
  const res = await getSum();
  console.log(res.data)
  sumInfo.value = res.data
  console.log(sumInfo.value)
  //计算百分比
  // 男
  let allNumber = parseInt(sumInfo.value.allNumber)
  sexInfo.value.nanSexBiLi = (parseInt(sumInfo.value.nanSexNumber) / allNumber * 100).toFixed(2)
  sexInfo.value.nvSexBiLi = (parseInt(sumInfo.value.nvSexNumber)/allNumber  * 100).toFixed(2)
  sexInfo.value.noSexBiLi = (parseInt(sumInfo.value.noSexNumber)/allNumber  * 100).toFixed(2)
  await yuaning();
}

/** 查询约局信息列表 */
const getList = async () => {
  const res = await getShList();
  SkYueJuList.value = res.data;
}

onMounted(() => {

  zhuzhuangtu();
  zhuzhuangtu2();
  funGetSum();
  getList();
});

</script>

<style scoped lang="scss">
.home {
  background-color: #f8f6f6;
}

.sum-one {
  background-color: #ffffff;
  border-radius: 6px;
  height: 100px;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;

}

.sum-two {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.sum-three {
  background-color: #ffffff;
  height: 300px;
  border-radius: 6px;
  padding: 20px;
}
</style>
